<template>
  <div class="table">
    <table>
        <thead>
            <tr>
                <slot name="thead"></slot>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(v, i) in list" :key="v.id">
                <slot name="tbody" :i='i' :v="v"></slot>
            </tr>
        </tbody>
    </table>
  </div>
</template>

<script>
// import MyTag from './MyTag.vue'
export default {
    components: {  },
    name: 'MyTable',
    props: {
        list: {
            type: Array,
        }
    },
    methods: {
        // saveTag(tag) {
        //     console.log(tag);
        // }
    }
}
</script>

<style>
    table {
        text-align: center;
        margin: 0 auto;
    }
    table,tr,td{
        border: 1px solid gray;
        border-collapse: collapse;
    }

    td {
        height: 40px;
    }

    thead td:nth-of-type(1){
        width: 40px;
    }
     thead td:nth-of-type(2){
        width: 40px;
    }    thead td:nth-of-type(3){
        width: 60px;
    }    thead td:nth-of-type(4){
        width: 60px;
    }
</style>